<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            2d-3d转换属性transform
        */
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid red;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 30px auto;
            /* 透视距离属性 必须设置在转换的父元素中 */
            perspective: 100px;
            /* 
                perspective-origin 设置元素的消失点
                水平方向的值是 left center right
                垂直方向的值是 top center bottom
                值可以是px,%,可以是负值
                只设置了一个值，另一个值默认是center(50%)
            */
            perspective-origin: left bottom;
            perspective-origin: 20px 30px;
            perspective-origin: 20% 30%;
            perspective-origin: right;
            perspective-origin: top;
        }
        .son {
            width: 100px;
            height: 100px;
            border: solid;
        }
        .son:hover{
            /* 
                倾斜 单位是角度deg 可以是负值
                skewX 在X轴上倾斜
                skewY 在Y轴上倾斜
                skew 只设置一个值是在X轴上倾斜
                    设置了2个值，分别是X轴和Y轴的倾斜角度 
            */
            /* transform: skewX(45deg); */
            /* transform: skewY(-45deg); */
            /* transform: skew(10deg, 20deg); */

            /* 
                平移 单位是具体的值（px） 可以是负值
                translateX 在X轴上平移
                translateY 在Y轴上平移
                translate 只设置一个值是在X轴上平移
                          设置了2个值，分别是X轴和Y轴的平移的距离 
                translate3d 必须设置3个值才有效
                            分别是X轴Y轴Z轴的平移距离
            */
            /* transform: translateX(20px); */
            /* transform: translateY(-20px); */
            /* transform: translateY(20px); */
            /* transform: translateZ(20px); */
            /* transform: translate(10px,20px); */
            /* transform: translate3d(10px,20px,30px); */
        
            /* 
                缩放 单位是数字 可以是负值
                scaleX 在X轴上缩放
                scaleY 在Y轴上缩放
                scaleZ 在Z轴上缩放（效果不明显）
                translate 只设置一个值 同时 在X轴和Y轴上缩放
                          设置了2个值，分别是X轴和Y轴的缩放
                translate3d 必须设置3个值才有效
                            分别是X轴Y轴Z轴的缩放距离
            */
            /* transform: scaleX(.5); */
            /* transform: scaleY(.5); */
            /* transform: scaleZ(.5); */
            /* transform: scale(2,3); */
            /* transform: scale3d(2,3,4); */

            /* 
                旋转 单位是角度deg 可以是负值
                rotateX 在X轴上旋转
                rotateY 在Y轴上旋转
                rotateZ 在Z轴上旋转
                translate 只设置一个值在Z轴上旋转
                translate3d 参考mdn （用坐标系加角度）
            */
            /* transform: rotateX(-180deg); */
            /* transform: rotateY(45deg); */
            /* transform: rotateZ(45deg); */
            /* transform: rotate(20deg); */
            transform: rotate3d(1,1,1,45deg);
        }    
    </style>
</head>
<body>
    <div class="box">
        <div class="son">hello</div>
    </div>
</body>
</html>